

<template>
<div class="app-container" >
  <div>
    <el-row :gutter="20">
      <el-col :span="11">
        <el-card shadow="hover" class="mgb20" style="height:240px;">
          <div class="user-info">
            <img src="../../assets/hust.jpg" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">用户名：{{username}}</div>
              <div>身份：{{this.userType === 2 ? "管理员" : "学生"}}</div>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" style="height:300px;"  v-if =  'this.userType === 1' >
          <template #header>
            <div class="clearfix">
              <span>操作说明</span>
            </div>
          </template>

          <el-tabs type="border-card" :tab-position="tabPosition" style="height: 200px;"  >
            <el-tab-pane label="商品">
              你可以在商品页面挑选商品并联系卖家</el-tab-pane>
            <el-tab-pane label="需求">
              你可以在需求页面联系买家卖出商品。</el-tab-pane>
            <el-tab-pane label="个人管理">
              管理个人的信息、商品、需求等。</el-tab-pane>
          </el-tabs>
        </el-card>
        <el-card shadow="hover" style="height:300px;"  v-if =  'this.userType === 2 ' >

          <el-tabs type="border-card" :tab-position="tabPosition" style="height: 200px;"  >
            <el-tab-pane label="用户管理">
              查看、修改用户信息。</el-tab-pane>
            <el-tab-pane label="商品管理">
              查看、修改商品信息。</el-tab-pane>
            <el-tab-pane label="请求管理">
              查看、修改请求信息。</el-tab-pane>
            <el-tab-pane label="类型管理">
              查看、修改商品&请求的类型，添加新的类型</el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

      <el-col :span="13">
        <el-card shadow="hover" style="height:561px;" >
          <el-carousel height="500px">
            <el-carousel-item v-for="item in 4" :key="item">
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
import CodeEditor from '../../components/CodeEditor/index';
import Schart from 'vue-schart';
import UserType from "../../common/userType";
import {fetchAllTerms, getDefaultTerm} from "../../api/admin";
export default {
  name: "index",
  components:{
    Schart
  },
  methods:{
    change(val) {
      this.data = val;
      console.log("changed")
    },
    open() {
      this.$message({
        message: '欢迎使用HUST网上二手市场',
        type: 'success',
        center: true
      });
    },
    compareDate(d1, d2) {
      return ((new Date(d1.replace(/-/g, "\/"))) > (new Date(d2.replace(/-/g, "\/"))));
    },
    culcPercent(num){
      return parseFloat(num) / this.moduleCounts *100
    },
    format(percentage){
      return ' '+Math.round(percentage / 100  * this.moduleCounts) + '/' + this.moduleCounts
    },
  },
  mounted:function () {   //进入页面自动调用函数
    this.open();
  },
  setup() {
    return {
    };
  },
  data() {

    const state = {

    };

    const handleRead = (index) => {
      const item = state.unread.splice(index, 1);
      console.log(item);
      state.read = item.concat(state.read);
    };
    const handleDel = (index) => {
      const item = state.read.splice(index, 1);
      state.recycle = item.concat(state.recycle);
    };
    const handleReadAll = () => {
      const item = state.unread.splice(0, state.unread.length);
      console.log(item);
      state.read = item.concat(state.read);
    };
    const handleDelAll = () => {
      const item = state.read.splice(0, state.read.length);
      state.recycle = item.concat(state.recycle);
    };
    return {
      tabPosition: 'top',
      username: localStorage.getItem('username'),
      state,
      handleRead,
      handleDel,
      handleReadAll,
      handleDelAll,
      userType:  parseInt(localStorage.getItem('userType')),
      items: [{
        content: '未开始阶段/小组自测阶段',
        timestamp:'',
        size: 'normal',
      }, {
        content: '教师评测阶段',
        timestamp: '',
        size: 'normal',
      }, {
        content: '评测结束阶段',
        timestamp: '',
        size: 'normal'
      }],
      termSelected: null,
      term: {
        timestamp:null,
        content:null,
        groupEndDate:null,
        teacherEndDate:null,
      },
      terms: [],
      currentDate:null,
      groups: [],
      moduleCounts: 0,
      userTeacherId: 0,
      userTerm: ''
    }

  },
  created() {

  }
}
</script>

<style scoped>

.message-title {
  cursor: pointer;
}
.handle-row {
  margin-top: 30px;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}


.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}
.el-carousel__item h3 {
   color: #475669;
   font-size: 14px;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
